body {
    margin: 0 0 0 0;
    padding: 0;
    background: url("../img/end2.webp");
    background-size: 100%;
}
.main {
    display: flex;
    flex-flow: column;
}
.main > *{
    margin: 4px;
    padding: 5px;
    border-radius: 10pt;
}
.main > article {
    flex: 1;
    order: 2;
    background: #FFBA41;
}
.main2{
    display: flex;
    flex-flow: row;
}


#r{
    height: 200px;
    width: 100%;
}


.nav {
    flex: 2;
    order: 1;
}

.anav {
    width: 100px;
    height: 600px;
    flex: 1;
    order: 2;
    /*background: #258e9b;*/
    border-radius: 10px;
}

.enav{
    flex: 2;
    order: 3;
}


.username {
    width: 100%;
    height: 60px;
    background: white;
    text-align: center;
    border-radius: 10px;

    display: flex;
    flex-flow: row;;
}
.ic1 {
    flex: 1;
    order: 1;
    margin-top: 10px;
    margin-left: 0;
    height: 30px;
}
.user {
    flex: 9;
    order: 2;
    border: white solid 2px;
    font-size: 20px;
    border-radius: 10px

}
.password{
    width: 100%;
    height: 60px;
    background: white;
    text-align: center;
    margin-top: 40px;
    border-radius: 10px;
    display: flex;
    flex-flow: row;
}
.ic2{
    flex: 1;
    order: 1;
    margin-top: 15px;
    margin-left: 5px;
    height: 30px;
}
.psw{
    flex: 6;
    order: 2;
    border: white solid 2px;
    font-size: 20px;
}
.btn{
    margin-top: 0;
    flex: 4;
    order: 3;
    height: 60px;
    border-radius: 10px;
    border: white solid 2px;
    font-size: 20px;
}

.ckb {
    width: 100%;
    height: 60px;
    background: white;
    text-align: center;
    margin-top: 40px;
    border-radius: 10px;
    display: flex;
    flex-flow: row;
}
.checkb{
    width: 20px;
}

.cspan{
    font-size: 20px;
    margin-top: 20px;
}
.lb {
    width: 100%;
    height: 60px;
    text-align: center;
    margin-top: 40px;
    border-radius: 10px;
}
.ltn{
    width: 100%;
    height: 60px;
    font-size: 30px;
    display: inline-block;
    text-decoration-line: none;
    color: #070707;
    line-height: 60px;
    background: #19598d;
    border: #19598d solid 2px;
    border-radius: 10px;
}
.regist{
    width: 100%;
    height: 60px;
    text-align: center;
    margin-top: 50px;
    border-radius: 10px;
    display: flex;
    flex-flow: row;
}
.con{
    flex: 6;
    order: 1;
}
.rgs {
    flex: 2.5;
    order: 2;
    font-size: 20px;
    padding-right: 0;
}
.registed{
    flex: 2;
    order: 3;
    font-size: 20px;
    color: aqua;
}
.registed:hover{
    color: mediumblue;
}
input[type=text],input[type=password]:focus{
    outline: none;
}

.registion{
    width: 100%;
    height: 100%;
    background: white;
    position: absolute;
    top: 0px;
}
.login:hover{
    color: aqua;
}

/*/////////////////////////////////////////////////////////////////*/

#l{
    height: 200px;
    width: 100%;
}

.lnav {
    flex: 1.5;
    order: 1;
}

.lanav {
    width: 100px;
    height: 600px;
    flex: 1.5;
    order: 2;
    border-radius: 10px;
}

.lenav{
    flex: 2;
    order: 3;
}
.u,.e {
    width: 100%;
    height: 60px;;
    margin-bottom: 30px;
}


.uh,eh {
    width: 100%;
    height: 100%;
    flex: 3;
    order: 1;
}
* {
    border: none;
}
.uf,ef {
    width: 100%;
    height: 100%;
    border: none;
    flex: 8;
    order: 2;
}
.us,.es {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    font-size: 20px;
    font-weight: bolder;
    display: inline-block;
    text-align: right;
}

#ut,#et {
    width: 100%;
    height: 100%;
    font-size: 20px;
}


.us:before{
    content: "*";
    color: red;
    margin-top: 20px;
}
.us:after {
    content: ":";
    color: #070707;
    margin-top: 20px;
    margin-right: 7px;
}
.phcity {
    height: 100%;
    position: relative;
    display: inline-block;
    color: rgba(0, 0, 0, .85);
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    line-height: 60px;
    background-color: #fafafa;
    border-radius: 0px;
    flex: 2;
    order: 1;
}
#pt{
    height: 100%;
    flex: 8;
    order: 2;
    font-size: 20px;
    border: none;
}


#codet{
    height: 100%;
    flex: 6;
    order: 1;
    font-size: 22px;
    color: rgba(0,0,0,.25);
}
.code {
    margin: 0;
    padding: 0;
    height: 100%;
    flex: 4;
    order: 2;
}
input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.sendcode {
    padding: 0;
    width: 100%;
    height: 100%;
    border-radius: 0px;
    font-size: 22px;
    background: white;
    color: rgba(0,0,0,.25);
}

.loginbtn {
    height: 100%;
    background: dodgerblue;
    border: none;
    border-radius:10px;
    flex: 3;
    order: 1;
}
.loginspan{
    height: 100%;
    flex: 3;
    order: 2;
    text-align: right;
    line-height: 60px;

}
.reg {
    height: 100%;
    font-size: 20px;
    color: aqua;
    text-align: right;
    line-height: 60px;
    flex: 2;
    order: 3;
}

.reg:hover{
    color: mediumblue;
}

@media screen and (max-width: 2114px){
    .nav {
        flex: 1;
    }
    .enav{
        flex: 1;
    }
}

@media screen and (max-width: 1277px){
    .nav {
        flex: 0.5;
    }
    .enav{
        flex: 0.5;
    }
}
@media screen and (max-width: 300px){
    .nav {
        flex: 0;
    }
    .enav {
        flex: 0;
    }
}

@media screen and (max-width: 2140px){
   .lnav {
        flex: 1;
    }
   .lenav{
        flex: 1;
    }
   .btn{
       font-size: 20px;
   }
   .con{
       flex: 2;
   }
}

@media screen and (max-width: 1277px){
    .lnav {
        flex: 0.5;
    }
    .lenav{
        flex: 0.5;
    }
    .sendcode{
        font-size: 15px;
    }
}

@media screen and (max-width: 1277px){
    .lnav {
        flex: 0.2;
    }
    .lenav{
        flex: 0.2;
    }
    .sendcode{
        font-size: 15px;
    }
}
@media screen and (max-width: 1075px){
    .lnav {
        flex: 0;
    }
    .lenav{
        flex: 0;
    }
    .sendcode{
        font-size: 5px;
    }
    .codet{
        flex: 4;
    }
}

.footer {
    width: 100%;
    height: 100px;
    text-align: center;
    font-size: 25px;
    font-weight: bolder;
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,.25);
    line-height: 100px;
}
.cube{
    width: 200px;
    height: 200px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-80deg);
    -webkit-animation: rotate 20s infinite;
    animation-timing-function: linear;
}
@-webkit-keyframes rotate{
    from{transform: rotateX(0deg) rotateY(0deg);}
    to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    transition: all .4s;
}
.pic{
    width: 200px;
    height: 200px;
}
.cube span{
    display: bloack;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 100px;
}
.cube .in_pic{
    width: 100px;
    height: 100px;
}
.cube .in_front{
    transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{
    transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{
    transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{
    transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{
    transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{
    transform: rotateX(-90deg) translateZ(50px);
}
